import React, { useEffect, useState } from "react";
import "./style.scss";
import { Sidebar, ProductCard } from "react-vant";
import axios from "axios";
const Index = () => {
  const [tabData, setTabData] = useState([]);
  const [activeIndex, setActiveIndex] = useState(0);
  const fetchTabData = async () => {
    const resp = await axios.get("/api/tab/data");
    setTabData(resp.data.data);
  };
  useEffect(() => {
    fetchTabData();
  }, []);
  return (
    <div className="classify">
      <Sidebar sideClassName="left">
        {tabData.map((v, i) => {
          return (
            <Sidebar.Item key={i} title={v.title}>
              <div className="right">
                {v.children.map(({ product: v }, index) => {
                  return (
                    <ProductCard
                      key={index}
                      price={v.pPrice}
                      desc={v.productExtInfo.promoTagDet1}
                      title={v.name}
                      thumb={v.image}
                    />
                  );
                })}
              </div>
            </Sidebar.Item>
          );
        })}
      </Sidebar>
    </div>
  );
};

export default Index;
